<script setup>
  import { ref, computed, reactive } from 'vue'
  import { onLoad } from "@dcloudio/uni-app"
  import { uniFetch } from '../../utils/fetch';
  // 组件 ref
  const popup = ref(null)
  const exceptionDescribe=ref("");
  // 文件提示
  const exceptionTime = computed(() => {
    return timePicker.value || '请选择'
  })
  const exceptionPlace=ref("");
  const arr=ref([]);
  const choosetype=(e)=>{
	  console.log(e,"choosetype");
	  types[e].check=!types[e].check
	 
  }
  const id=ref("")
  onLoad(e=>{
	  console.log(e,"e");
	  id.value=e.id
  })
  const count=computed(()=>{
	  return exceptionDescribe.value.length>0?exceptionDescribe.value.length:0
  })

  
  const types=reactive([
	  {
		  name:"发动机启动困难",
		  check:false
	  },
	  {
	  		  name:"不着车",
	  		  check:false
	  },
	  {
	  		  name:"漏油",
	  		  check:false
	  },
	  {
	  		  name:"漏水",
	  		  check:false
	  },
	  {
	  		  name:"照明失灵",
	  		  check:false
	  }
	
  ])
  const onPopupConfirm=()=>{
  arr.value=[]
  console.log(types);
  	  types.forEach(e=>{
  		  if(e.check == true){
  			  arr.value.push(e.name)
  		  }
  	  })
  
    	  exceptionType.value=arr.value.join(",");
      popup.value.close()
    }
  const submit=()=>{
	  console.log(exceptionTime.value);
	  console.log(exceptionPlace.value);
	  exceptionImagesList.value=[];
	 exceptionImagesListt.value.forEach(el=>{
		 exceptionImagesList.value.push({
			 url:el.url
		 })
	 })
	 console.log(exceptionImagesList.value);
	 
	 uniFetch({
		 url:"/driver/tasks/reportException",
		 method:"post",
		 data:{
			 transportTaskId:id.value,
			  exceptionTime:exceptionTime.value,
			   exceptionPlace:exceptionPlace.value,
			   exceptionType:exceptionType.value,
			   exceptionDescribe: exceptionDescribe.value,
			   exceptionImagesList:exceptionImagesList.value
		 }
	 }).then(res=>{
	 	if(res.data.code == 200){
	 		uni.showToast({
	 			title:"操作成功",
	 			icon:"none"
	 		})
	 		uni.reLaunch({
	 			url:"/pages/task/index"
	 		})
	 	}else{
			uni.showToast({
				title:res.msg,
				icon:"none"
			})
		}
	 })
  }
  // 异常日期
  const timePicker = ref('');
const exceptionType=ref("");
  // 打开地图
  const onLocationChoose=async()=> {
	  const res=await uni.chooseLocation({})
	  console.log(res,"res");
	  exceptionPlace.value=res.address
  }
const exceptionImagesListt=ref([]);
const exceptionImagesList=ref([]);
 
  // 打开弹层
  function onPopupOpen() {
    popup.value.open()
  }
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <uni-list-item show-arrow title="异常时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="timePicker">
                <view class="picker-value">{{ exceptionTime }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>

          <uni-list-item
            show-arrow
            clickable
            ellipsis="1"
            @click="onLocationChoose"
            title="上报位置"
            :rightText="exceptionPlace == ''?'请选择':exceptionPlace"
          />
          <uni-list-item
            show-arrow
            clickable
            @click="onPopupOpen"
            title="异常类型"
            :rightText="exceptionType == ''?'请选择':exceptionType"
          />
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea
                  class="textarea"
				  :maxlength="50"
				  v-model="exceptionDescribe"
                  placeholder="请输入异常描述"
                ></textarea>
                <view class="words-count">{{count}}/50</view>
              </view>
            </template>
          </uni-list-item>
		  
          <uni-list-item
            :border="false"
            style="margin-top: -30rpx"
            direction="column"
            title="上传图片（最多6张）"
          >
            <template v-slot:footer>
          	<uni-file-picker v-model="exceptionImagesListt" file-extname="jpg,webp,gif,png" file-mediatype="image" limit="6" title="请拍照上传照片"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button class="button disable" @click="submit">提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" :mask-click="false" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>
        <uni-list-item :title="item.name" v-for="item,index in types">
          <template v-slot:footer>
            <checkbox-group class="checkbox" @change="choosetype(index)">
              <checkbox color="#EF4F3F" :value="item.check" />
            </checkbox-group>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
